﻿@using Smartstore.Web.Models.Search;

@model SearchBoxModel

@{
    var idFriendlyOrigin = Model.Origin.Replace('/', '-').ToLowerInvariant();
}

<form action="@Model.SearchUrl" class="instasearch-form has-icon" method="get" role="search">
    <span id="instasearch-desc-@idFriendlyOrigin" class="sr-only">
        @T(Model.InstantSearchEnabled ? "Aria.Description.InstantSearch" : "Aria.Description.SearchBox")
    </span>
    <input type="search"
           class="instasearch-term form-control text-truncate"
           role="combobox"
           aria-autocomplete="list"
           aria-expanded="false"
           aria-controls="instasearch-drop-body"
           name="q"
           value="@Model.CurrentQuery"
           placeholder="@Model.InputPlaceholder"
           aria-label="@Model.InputPlaceholder"
           aria-describedby="instasearch-desc-@idFriendlyOrigin"
           data-instasearch="@(Model.InstantSearchEnabled ? "true" : "false")"
           data-minlength="@(Model.SearchTermMinimumLength.ToString())"
           data-showthumbs="@(Model.ShowThumbsInInstantSearch.ToString().ToLower())"
           data-url="@Model.InstantSearchUrl"
           data-origin="@Model.Origin"
           attr-autocomplete='(Model.InstantSearchEnabled, "off")' />

    <div class="instasearch-addon d-flex align-items-center justify-content-center">
        <button type="button" class="instasearch-clear input-clear" aria-label="@T("Search.SearchBox.Clear")">
            <i class="fa fa-xmark"></i>
        </button>
    </div>
    <span class="input-group-icon instasearch-icon">
        <button type="submit" class="instasearch-submit input-clear bg-transparent" tabindex="-1" aria-hidden="true">
            <i class="fa fa-magnifying-glass"></i>
        </button>
    </span>
    <div class="instasearch-drop">
        <div id="instasearch-drop-body" class="instasearch-drop-body clearfix" role="listbox"></div>
    </div>

    <zone name="searchbox_addon"></zone>
</form>